<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LORA网关管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"> 
    <!-- <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet"> -->
    <style>
        .gateway-container {
            padding: 0;
        }
        
        .monitor-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .monitor-item {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            padding: 20px;
            position: relative;
        }

        .gateway-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebeef5;
            padding-right: 70px; /* 为状态标签留出空间 */
        }

        .gateway-name {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
            flex: 1;
        }

        .gateway-info {
            margin-bottom: 15px;
        }

        .info-item {
            margin-bottom: 15px;
        }

        .info-item .label {
            display: block;
            color: #606266;
            font-size: 14px;
            margin-bottom: 8px;
        }

        .info-item .value {
            font-size: 16px;
            color: #409EFF;
            font-weight: bold;
        }

        .gateway-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .form-container {
            max-width: 800px;
            margin: 20px auto;
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .developing-notice {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px;
            color: #909399;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .developing-notice i {
            font-size: 48px;
            margin-bottom: 15px;
        }

        .developing-notice span {
            font-size: 16px;
        }

        .location-info, .network-info {
            background: #f8f9fa;
            border-radius: 4px;
            padding: 12px;
            margin-top: 8px;
        }

        .location-item, .network-item {
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .location-item:last-child, .network-item:last-child {
            margin-bottom: 0;
        }

        .sub-label {
            color: #606266;
            font-size: 13px;
            width: 70px;
            display: inline-block;
        }

        /* 移除el-card的边框和背景 */
        .el-card {
            border: none;
            background: transparent;
        }
        
        /* 调整tab样式 */
        .el-tabs__nav-wrap::after {
            height: 1px;
            background-color: #EBEEF5;
        }
        
        .el-tabs__item {
            font-size: 15px;
            height: 40px;
            line-height: 40px;
        }
        
        .el-tabs__item.is-active {
            font-weight: bold;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .monitor-grid {
                grid-template-columns: 1fr;
            }
            
            .gateway-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .gateway-actions {
                justify-content: flex-start;
            }
            
            .form-container {
                padding: 20px;
            }
        }

        /* 告警级别样式 */
        .alarm-status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }

        .alarm-status i {
            font-size: 14px;
        }

        .alarm-critical {
            background-color: #FEF0F0;
            color: #F56C6C;
        }

        .alarm-major {
            background-color: #FDF6EC;
            color: #E6A23C;
        }

        .alarm-minor {
            background-color: #F0F9EB;
            color: #67C23A;
        }

        .alarm-warning {
            background-color: #EEF2FC;
            color: #409EFF;
        }

        /* 修改告警状态相关样式 */
        .gateway-status {
            position: absolute;
            top: 20px;
            right: 20px;
        }

        .gateway-status .el-tag {
            min-width: 52px;
            text-align: center;
            padding: 0 8px;
            height: 24px;
            line-height: 24px;
            border-radius: 4px;
        }

        /* 资源管理样式 */
        .resource-overview {
            margin-bottom: 20px;
        }

        .resource-card {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .resource-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .resource-detail {
            margin-top: 10px;
            font-size: 14px;
            color: #606266;
        }

        .device-stats {
            margin-bottom: 20px;
        }

        .stat-card {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            text-align: center;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 14px;
            color: #606266;
        }

        .resource-trend {
            margin-bottom: 20px;
        }

        .chart-container {
            width: 100%;
            height: 300px;
        }

        /* 异常处理样式 */
        .error-header {
            margin-bottom: 20px;
        }

        .error-filter {
            margin-bottom: 10px;
        }

        .pagination-container {
            margin-top: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="lora-gateway">
        <div class="gateway-container">
            <el-tabs v-model="gatewayActiveTab">
                <!-- 网关运行监控 -->
                <el-tab-pane label="网关运行监控" name="monitor">
                    <el-card>
                        <div class="monitor-grid">
                            <div v-for="gateway in gateways" :key="gateway.id" class="monitor-item">
                                <div class="gateway-header">
                                    <div class="gateway-name">{{gateway.name}}</div>
                                    <div class="gateway-status">
                                        <el-tag :type="gateway.status === '在线' ? 'success' : 'danger'" size="small">
                                            {{gateway.status}}
                                        </el-tag>
                                    </div>
                                </div>
                                <div class="gateway-info">
                                    <div class="info-item">
                                        <span class="label">设备ID</span>
                                        <span class="value">{{gateway.id}}</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="label">位置信息</span>
                                        <div class="location-info">
                                            <div class="location-item">
                                                <span class="sub-label">楼栋：</span>
                                                <span>{{gateway.building}}</span>
                                            </div>
                                            <div class="location-item">
                                                <span class="sub-label">楼层：</span>
                                                <span>{{gateway.floor}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <span class="label">网络信息</span>
                                        <div class="network-info">
                                            <div class="network-item">
                                                <span class="sub-label">信号：</span>
                                                <span>{{gateway.signal}}</span>
                                            </div>
                                            <div class="network-item">
                                                <span class="sub-label">延迟：</span>
                                                <span>{{gateway.delay}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="gateway-actions">
                                    <el-button size="mini" type="primary" @click="configureGateway(gateway)">配置</el-button>
                                    <el-button size="mini" type="warning" @click="restartGateway(gateway)">重启</el-button>
                                    <el-button size="mini" type="info" @click="viewResource(gateway)">资源管理</el-button>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-tab-pane>

                <!-- 网关配置管理 -->
                <el-tab-pane label="网关配置管理" name="config">
                    <div class="form-container">
                        <el-form ref="gatewayConfigForm" :model="gatewayConfig" label-width="120px">
                            <el-form-item label="网关ID" prop="gatewayId">
                                <el-input v-model="gatewayConfig.gatewayId" placeholder="请输入网关ID"></el-input>
                            </el-form-item>
                            <el-form-item label="网关名称" prop="name">
                                <el-input v-model="gatewayConfig.name" placeholder="请输入网关名称"></el-input>
                            </el-form-item>
                            <el-form-item label="网关位置">
                                <el-select v-model="gatewayConfig.building" placeholder="选择楼栋" style="width: 120px; margin-right: 10px;">
                                    <el-option label="1号楼" value="building1"></el-option>
                                    <el-option label="2号楼" value="building2"></el-option>
                                </el-select>
                                <el-select v-model="gatewayConfig.floor" placeholder="选择楼层" style="width: 120px;">
                                    <el-option label="1层" value="floor1"></el-option>
                                    <el-option label="2层" value="floor2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="网络配置">
                                <el-input v-model="gatewayConfig.ip" placeholder="IP地址"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="saveGatewayConfig">保存配置</el-button>
                                <el-button @click="resetGatewayConfig">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>

                <!-- 资源管理 -->
                <el-tab-pane label="资源管理" name="resource">
                    <el-card>
                        <div class="resource-overview">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <div class="resource-card">
                                        <div class="resource-title">CPU使用率</div>
                                        <el-progress type="dashboard" :percentage="resourceStats.cpuUsage" :color="customColors"></el-progress>
                                        <div class="resource-detail">
                                            <span>当前: {{resourceStats.cpuUsage}}%</span>
                                            <span>峰值: {{resourceStats.cpuPeak}}%</span>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="resource-card">
                                        <div class="resource-title">内存使用率</div>
                                        <el-progress type="dashboard" :percentage="resourceStats.memoryUsage" :color="customColors"></el-progress>
                                        <div class="resource-detail">
                                            <span>已用: {{resourceStats.memoryUsed}}GB</span>
                                            <span>总量: {{resourceStats.memoryTotal}}GB</span>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="resource-card">
                                        <div class="resource-title">存储使用率</div>
                                        <el-progress type="dashboard" :percentage="resourceStats.storageUsage" :color="customColors"></el-progress>
                                        <div class="resource-detail">
                                            <span>已用: {{resourceStats.storageUsed}}GB</span>
                                            <span>总量: {{resourceStats.storageTotal}}GB</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="device-stats">
                            <h3>设备连接统计</h3>
                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <div class="stat-card">
                                        <div class="stat-value">{{deviceStats.total}}</div>
                                        <div class="stat-label">总设备数</div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="stat-card">
                                        <div class="stat-value">{{deviceStats.online}}</div>
                                        <div class="stat-label">在线设备</div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="stat-card">
                                        <div class="stat-value">{{deviceStats.active}}</div>
                                        <div class="stat-label">活跃设备</div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="stat-card">
                                        <div class="stat-value">{{deviceStats.error}}</div>
                                        <div class="stat-label">异常设备</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="resource-trend">
                            <h3>资源使用趋势</h3>
                            <div class="chart-container" ref="resourceChart"></div>
                        </div>
                    </el-card>
                </el-tab-pane>

                <!-- 异常处理 -->
                <el-tab-pane label="异常处理" name="error">
                    <div class="developing-notice">
                        <i class='bx bx-code-block'></i>
                        <span>功能开发中，敬请期待...</span>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#lora-gateway',
            data() {
                return {
                    gatewayActiveTab: 'monitor',
                    gateways: [
                        {
                            id: 'GW001',
                            name: '主楼网关01',
                            status: '在线',
                            building: '1号楼',
                            floor: '1层',
                            signal: '-75dBm',
                            delay: '10ms'
                        },
                        {
                            id: 'GW002',
                            name: '主楼网关02',
                            status: '在线',
                            building: '1号楼',
                            floor: '2层',
                            signal: '-78dBm',
                            delay: '15ms'
                        },
                        {
                            id: 'GW003',
                            name: '副楼网关01',
                            status: '离线',
                            building: '2号楼',
                            floor: '1层',
                            signal: '-100dBm',
                            delay: '0ms'
                        }
                    ],
                    gatewayConfig: {
                        gatewayId: '',
                        name: '',
                        building: '',
                        floor: '',
                        ip: ''
                    },
                    resourceStats: {
                        cpuUsage: 50,
                        cpuPeak: 80,
                        memoryUsage: 60,
                        memoryUsed: 16,
                        memoryTotal: 32,
                        storageUsage: 70,
                        storageUsed: 128,
                        storageTotal: 256
                    },
                    deviceStats: {
                        total: 100,
                        online: 80,
                        active: 60,
                        error: 10
                    }
                }
            },
            methods: {
                configureGateway(gateway) {
                    this.gatewayConfig = {
                        gatewayId: gateway.id,
                        name: gateway.name,
                        building: gateway.building,
                        floor: gateway.floor,
                        ip: ''
                    };
                    this.gatewayActiveTab = 'config';
                },
                restartGateway(gateway) {
                    this.$confirm(`确认重启网关 ${gateway.name}?`, '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.$message.success('重启指令已发送');
                    }).catch(() => {});
                },
                saveGatewayConfig() {
                    this.$message.success('配置保存成功');
                },
                resetGatewayConfig() {
                    this.gatewayConfig = {
                        gatewayId: '',
                        name: '',
                        building: '',
                        floor: '',
                        ip: ''
                    };
                },
                viewResource(gateway) {
                    this.gatewayActiveTab = 'resource';
                }
            }
        })
    </script>
</body>
</html>